import { authService } from "@/services";
import { useRequest } from "ahooks";
import { Button, Card, Flex, Form, Input, message } from "antd";
import CheckCode from "./check-code";
import { useNavigate } from "umi";

const Login = () => {
  const [api, context] = message.useMessage();
  const navigate = useNavigate();
  const loginService = useRequest(authService.login, {
    manual: true,
  });

  const onSubmit = async (values: any) => {
    const response = await loginService.runAsync({
      userName: values.username,
      password: values.password,
      code: values["checkCode"].value,
      uuid: values["checkCode"].uuid,
    });

    authService.setAuth(response.data.token);
    api.success("Login success");
    navigate("/");
  };
  return (
    <>
      {context}
      <Flex
        style={{
          margin: "8px",
          height: "100%",
        }}
      >
        <div
          style={{
            width: "70%",
          }}
        >
          TODO
        </div>
        <Form
          layout="vertical"
          autoComplete="off"
          onFinish={onSubmit}
          style={{ flex: 1, alignSelf: "center" }}
        >
          <Form.Item label="UserName" name="username">
            <Input />
          </Form.Item>
          <Form.Item label="Password" name="password">
            <Input.Password visibilityToggle={false} />
          </Form.Item>
          <Form.Item label="Check Code" name="checkCode">
            <CheckCode />
          </Form.Item>
          <Form.Item>
            <Button
              block
              type="primary"
              htmlType="submit"
              loading={loginService.loading}
            >
              Login
            </Button>
          </Form.Item>
        </Form>
      </Flex>
    </>
  );
};

export default Login;
